
/**
 * 为数据扩展一个新属性 并且以观察者模式进行关联
 * 当a属性改变时影响b属性  当b属性改变时影响a属性
 * 
 * @param {*} dataX 原始数据 支持object或者[object,object..]
 * @param {*} o_field 原属性a
 * @param {*} n_field 新属性b
 * @param {*} relMap 映射关系
 */
function extendObField(dataX,o_field,n_field,relMap){
    var arraySetflag=false
    var arrayLen=1
    if(Array.isArray(dataX)){
        arraySetflag=true
        arrayLen=dataX.length
    }
    for(var i=0;i<arrayLen;i++){
        var data=undefined
        if(arraySetflag){
            data=dataX[i]
        }else{
            data=dataX
        }
        Object.defineProperty(data, n_field, {
            configurable: true,
            enumerable: true,
            get: function(){
                return relMap[this[o_field]];
            },
            set: function(newValue) {
                for(var k in relMap){
                    if(newValue==relMap[k]){
                        this[o_field] = k;
                    }
                }
               // this[n_field] = newValue;
            } 
        });
    }
}

/**
 * 页面状态控制
 * @param modeType 'edit' 编辑 'read' 只读 
 * @param document  dom根节点通常传递 vm.$el
 */
function pageModeInit(modeType,document){
    console.log(">>>>>>>>>pageModeInit:",modeType,document)
    var elements = document.querySelectorAll('input, textarea');
    if(modeType!='edit'){
        //将dom中所有input 设置为disabled
        for(var i=0;i<elements.length;i++){
            elements[i].disabled=true;
            elements[i].classList.add("readonlyInput");
            elements[i].classList.remove("editInput");
        }
    }else{
        for(var i=0;i<elements.length;i++){
            elements[i].disabled=false;
            elements[i].classList.remove("readonlyInput");
            elements[i].classList.add("editInput");
            
        }
    }
}


/**
 * checkbox组件封装 已经全局注册 直接使用即可
 * 使用示例  <x-checkbox :options="[ { value: 'inspectionbasistype', label: '《公共场所卫生检验方法（GB/T18204-2013）》' },
                                     { value: 'inspectionbasistype2', label: '《游泳池水微生物检验方法（GB/T 18204-2000）》'}]" 
             :data="data" :statarr="[2,3]" :pagemode="pageMode" ></x-checkbox>
    其中data是指checkbox绑定的直接json对象，如果有多层请一定要指向当前层级的值  在组件逻辑中引用值方式类似 data[xxx-value]        
    其中statarr是指checkbox未选中和选中状态的对应状态值数组   如果不设置该props参数默认使用[0,1]填充
    其中pageMode表示页面模式  read:只读  edit:编辑   如果完全不设置 并且从全局变量无法找到pagemode pageMode则使用read模式 
    
 * @returns 
 */
    function getXCheckBoxComponent() {
        //
        var vc= Vue.extend({
            name: 'x-checkbox',
            template: '<div><div v-for="(item, index) in innerOptions" :key="index" > <label>{{item.label}} </label> <input  @change="onChange"  type="checkbox"  :value="item.value"   v-model="selectedOptionsCp" ></input> </div></div>   ',
            props:['options','data','statarr','pagemode'],
            data:function() {
                return {
                    titlex:'测试?',
                    //selectedOptions: [],
                    innerOptions:[],
                    selecedStat:["0","1"]
                }
            },
            mounted:function(){
                this.innerOptions=this.$props.options;
            },
            updated:function() {
                //console.log("updated:",this.$props.pagemode,this.$refs.inputx)
    
                pageModeInit((this.$props.pagemode || pageMode || pagemode || 'read'),this.$el)
            },
            computed:{
                selectedOptionsCp:function(){
                    var tmpSelectOptions=[];
                    for(var k in this.$props.options){
                        var op=this.$props.options[k];
                        if(this.$props.data[op.value]==this.getStatConfig(true)){
                            console.log("computed > x-checkbox初始选中:",op.value)
                            tmpSelectOptions.push(op.value)
                        }
                    }
                    return tmpSelectOptions
                    // console.log("selectedOptionsCp:",optionValue)
                    // return this.$props.data[optionValue]==this.getStatConfig(true)
                }
            },
            methods:{
                getStatConfig:function(selectedBoolean){
                    var index=0;
                    if(selectedBoolean){
                        index=1;
                    }
                    console.log(this.$props.statarr)
                    if(this.$props==undefined || this.$props.statarr==undefined){
                        console.log("从默认cfg获取配置:",this.selecedStat)
                        return this.selecedStat[index]
                    }else{
                        console.log("从props获取配置:",this.$props.statarr)
                        return this.$props.statarr[index]
                    }
                },
                onChange:function(event){
                    // console.log("checkbox:",event.target.value,this.selectedOptions)
                    // console.log(this.$props.options)
                    this.$props.data[event.target.value]=this.getStatConfig(event.target.checked)
                   
                },
                selectedOptionsCpxxxx:function(optionValue){
                    console.log("??selectedOptionsCp:",optionValue)
                    console.log(this.$props.data[optionValue],this.getStatConfig(true))
                    console.log(this.$props.data[optionValue]==this.getStatConfig(true))
                    return this.$props.data[optionValue]==this.getStatConfig(true)
                }
            }
    
        });
    
        return vc
    }
    
    
    Vue.component('x-checkbox', getXCheckBoxComponent());



/**
   * 共通 增删改数据表格（自动设置数据中的行对象operType操作符号  满足后台autoCUDService执行接口要求 方便快速完成增删改操作）
   * @param colConfigArr 列配置对象数组 例如
   *                      [{title:"样品编号",field:"sampleid",width:"100px"},
                            {title:"样品数量(ml)",field:"samplequantity"},
                            {title:"样品性状",field:"samplecharacter"},
                            {title:"备注",field:"remarks",content:':<textarea></textarea>">'}]
                         其中content是可选配置项 使用者可以自定义列中html内容  不用写v-model 组件创建实例会自行进行v-model绑定 
   * @param pageMode 页面状态 'edit' 'read'  编辑/查看模式（决定控件是否可操作） 
   * @returns 
   */
function getSubTableComponent(colConfigArr,pageMode) {
    if(colConfigArr==undefined){
      alert('配置错误,请传递每列属性对应的配置数组,例如: [{title:"医院名称",field:"hospital",tdContent:自定义列中html内容例如<textarea></textarea>}]')
      return
    }
    var headerDomStr=''
    var headerTitles=[]
    var colFieldKeys=[]
    for(k in colConfigArr){
      headerTitles.push(colConfigArr[k].title)
      colFieldKeys.push(colConfigArr[k].field)
    }
  
    
      if(pageMode=='edit'){
        headerTitles.push("操作")
      }
      headerDomStr='<tr ref="headerRow" > <th v-for="item in headerTitles" >{{item}}</th> </tr>'
     
    var contentDomStr=' <slot></slot>'
    if(colConfigArr!=undefined && colConfigArr.length>0){
      console.log(colFieldKeys)
      var controlCol=''
      var editflag='disabled'
      var inputClass='class="readonlyInput"'
      if(pageMode=='edit'){
        inputClass='class="editInput"'
        editflag=''
        controlCol="<td><button class='rowDeleteButton' @click='deleteRow(rowIndex)' >删除</button></td>"
      }
  
     // contentDomStr='<template v-for="rowData in tabledata"> <tr> <td v-for="ck in colFieldKeys" :ref="ck" ><input '+inputClass+' '+editflag+' v-model="rowData[ck]" ></input>  </td> '+controlCol+'</tr></template>'
      contentDomStr+="<template v-for='(rowData,rowIndex) in tabledata'> <tr  v-if='rowData.operType!=1'>"
      for(var ck in colConfigArr){
        contentDomStr+="<td>"
        var widthStr="";
        if(colConfigArr[ck].width){
            widthStr="style='width:"+colConfigArr[ck].width+"'"
        }
        console.log("widthStr:",widthStr)
        if(colConfigArr[ck].content!=undefined && colConfigArr[ck].content!="" ){
          //有自定义内容 使用自定义内容
          var tmpContent=colConfigArr[ck].content
          tmpContent=tmpContent.replace("<input","<input "+' '+editflag+' @focus="readyChange(rowIndex)" v-model=rowData.'+colConfigArr[ck].field)
          contentDomStr+=tmpContent.replace(">"," "+widthStr+" >")
        }else{
          //没有使用通用input
          contentDomStr+='<input @focus="readyChange(rowIndex)" '+widthStr+' '+inputClass+' '+editflag+' v-model=rowData.'+colConfigArr[ck].field+' ></input>'
        }
        contentDomStr+="</td>"
      }
      contentDomStr+=controlCol+"</tr></template>"
    
    }
  
     //Vue.component('xcolumns', getXcolumnsComponent());
    // var xcolumnsComponent=getXcolumnsComponent();
    // console.log("xc:",xcolumnsComponent)
  
    var vc= Vue.extend({
      name: 'sub-table',
      template: ' <div><table class="subtable"><slot name="header"></slot>'+headerDomStr+contentDomStr+' </table>     <slot></slot>   </div> ',
      props:['tabledata'],
      data: function () {
        return {
          title: 'Sub Table',
          headerTitles:headerTitles,
          colFieldKeys:colFieldKeys,
          initoperType:false
        }
      },
      updated:function(){
        if(this.initoperType) return
        console.log("初始化数据状态",this.$props.tabledata.length)
        //初始化数据状态为未修改
        for(var k in this.$props.tabledata){
          var tmpRData=this.$props.tabledata[k]
          if(tmpRData.operType==undefined){
            tmpRData.operType=0
          }
        }
        this.initoperType=true
      },
      methods:{
        deleteRow:function(index){
            console.log("x内部响应点击:"+index)
          // this.$emit('deleteData', index)
          var reacord=this.$props.tabledata[index]
          if(reacord.operType==2){
            //是临时新增的 直接删
            this.$props.tabledata.splice(index, 1)
          }else{
            //标记为删除
            this.$props.tabledata[index].operType=1
          }
          this.$forceUpdate(); // 强制当前组件重新渲染
          console.log(this.$props.tabledata)
        },
        readyChange:function(index){
          //准备修改数据 不管最后改没改  去掉比对逻辑判断状态为已修改
          if(this.$props.tabledata[index].operType==0){
             this.$props.tabledata[index].operType=3
          }
        }
      },
      mounted:function(){
        //定义了标题行插槽内容  将自动生成的标题行隐藏
        if(this.$slots!=undefined && this.$slots.header!=undefined){
          this.$refs['headerRow'].style.display= 'none';
        }
      }
      // watch:{
      //   tabledata: {
      //     handler(newRecords, oldRecords) {
      //       console.log("监听改变")
      //       for(var i in newRecords){
      //         if(newRecords[i].operType==undefined){
      //           newRecords[i].operType="0"
      //         }
      //       }
      //     },
      //     deep: true // 开启深度监听
      //   }
      // }
      
      
    });   
  
    return vc
  
  }





// var link = document.createElement('link');
// link.rel = 'stylesheet';
// link.href = 'x_component.css'; // 这里替换为你的CSS文件路径
// document.head.appendChild(link);


